<template>
    <div class="">
        <h1> set 组件 ---------- {{ $store.state.msg }}</h1>

        <hr>
        <h1> 采用计算属性获取msg : {{ myMsg }} </h1>
        <hr>

        <h1 style="color:red"> {{ $store.state.money }}</h1>

        <button @click="setMoney"> 点击修改数据</button>

        <hr>

        <h1> getters获取数据:{{ $store.getters.doubleMoney }}</h1>

        <h1> 计算属性 getters获取数据:{{ doubleMoney }}</h1>

        <hr>


        <h1> 下面是获取模块内的数据 (user, cart) </h1>

        <!-- <h3> {{$store..state.模块的名字.state里面的名字}} </h3> -->
        <h3> {{ $store.state.user.userName }} </h3>
        <div>
            {{ $store.state.cart.goodsList }}
        </div>
        <ul>
            <li v-for="item in   $store.state.cart.goodsList  ">

                {{ item }}
            </li>
        </ul>

        <button @click="handlerClick"> 点击触发cart里面的方式</button>

        {{ $store.getters['cart/mapGoodsList'] }}


        <hr />
        {{ mapAddGoods }}


    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs, ref, computed } from "vue"

import { useStore } from 'vuex'

import { CHANGEMONEY } from '../store/mutation-types'

export default {
    name: "",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    //这里存放数据
    setup () {
        const data = reactive({

        })

        const store = useStore()

        const setMoney = () => {
            // vue2 的写法
            // this.$store.dispatch('asyncChangeMoney')
            // vue3  异步操作
            store.dispatch('asyncChangeMoney')
            //     同步操作 
            // store.commit(CHANGEMONEY)

        }

        const myMsg = computed(() => store.state.msg)
        const doubleMoney = computed(() => store.getters.doubleMoney)

        const handlerClick = () => {
            //  commit('模块名/方法')
            // store.commit('cart/addGoods')
            store.dispatch('cart/asyncAddGoods')
        }

        const mapAddGoods = computed(() => store.getters['cart/mapGoodsList'])

        return {
            data,
            setMoney,
            myMsg,
            doubleMoney,
            handlerClick,
            mapAddGoods
        }
    }
}
</script>

<style lang="css" scoped>
</style>
